<template>
    <div class="login">
        <div class="login-wrap">
            <div class="login-left">
                <p class="login-left-title">{{ appName }}</p>
            </div>

            <div class="login-right">
                <div class="login-right-main">
                    <h4 class="login-right-main-title">登录</h4>
                    <el-form ref="dataFormRef" :model="dataForm" label-width="auto" :status-icon="true" :rules="rules"
                        @keyup.enter="onLogin(dataFormRef)">
                        <el-form-item label="用户名" prop="userName">
                            <el-input v-model="dataForm.userName" placeholder="请输入用户名" :prefix-icon="User"
                                autocomplete="off" class="login-right-main-input" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" show-password v-model="dataForm.password" placeholder="请输入密码"
                                :prefix-icon="Lock" autocomplete="off" class="login-right-main-input" />
                        </el-form-item>
                        <el-form-item label="验证码" prop="verifyCode">
                            <div style="display: flex;align-items: center;">
                                <el-input v-model="dataForm.verifyCode" placeholder="请输入验证码" :prefix-icon="Key"
                                    autocomplete="off" class="login-right-main-input" />
                                <el-image :src="verifyCodeUrl" fit="fill"
                                    style="width: 150px;height: 45px;margin-left: 5px;" @click="onRefreshCode" />
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox v-model="dataForm.remberme" label="记住密码" />
                        </el-form-item>
                        <el-form-item label-width="0">
                            <el-button type="primary" size="small" class="login-right-main-btn"
                                @click="onLogin(dataFormRef)">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>

        <!--页脚-->
        <div class="login-footer">
            <p><a href="#">{{ companyName }}</a>
                {{ year }} &copy; </p>
        </div>
    </div>
</template>


<script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { User, Lock, Key } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'
import { v4 as uuidv4 } from 'uuid'
import appStorage from '@/stores/storage';
import api from '@/apis/api';
import { StorageKey } from '@/constant';
import baseUrl from '@/apis/baseUrl';
const appName = ref('XXX管理系统')
const companyName = ref('XXXXXX有限公司')
const year = ref(new Date().getFullYear());
const verifyCodeUrl = ref('')//图片验证码路径
const uuid = ref('')//uuid,用于api获取验证码
const router = useRouter();
const route = useRoute();

const dataFormRef = ref()
const dataForm = reactive({
    userName: '',
    password: '',
    verifyCode: '',
    remberme: false,
})

const rules = reactive({
    userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    verifyCode: [{ required: true, message: "请输入验证码", trigger: "blur" }, { min: 4, max: 4, message: "请输入4位验证码", trigger: "blur" }]
});

onMounted(() => {
    uuid.value = uuidv4();
    // console.log(uuid)
    let loginStorage = appStorage.getLocal(StorageKey.USER_REMBER)
    if (loginStorage != null) {
        dataForm.remberme = true
        dataForm.userName = loginStorage.username
        dataForm.password = loginStorage.password
    } else {
        dataForm.remberme = false
    }
    onRefreshCode();
});
//刷新验证码
async function onRefreshCode() {
    verifyCodeUrl.value = `${baseUrl.user}/verifycode?uuid=${uuid.value}&t=${new Date().getTime()}`
}
function onLogin(formEl) {
    // console.log(dataForm)
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            // console.log('验证通过')
            api.user.login(dataForm.userName, dataForm.password, dataForm.verifyCode, uuid.value, resp => {
                // console.log(resp)
                appStorage.initData(resp.data.token, resp.data.user, dataForm.remberme, () => {
                    router.push("/home")
                });
            });
        }
    });
}
</script>


<style lang="less" scoped>
.login {
    width: 99vw;
    height: 98vh;
    background: #019ec4;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    @media only screen and (max-width:992px) {
        .login-wrap {
            width: 96% !important;
        }

        .login-right {
            width: 100% !important;
        }
    }

    &-wrap {
        margin: 0 auto;
        width: 1000px;
        box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
        animation-duration: 1s;
        animation-fill-mode: both;
        border-radius: 5px;
        overflow: hidden;
    }

    &-left {
        justify-content: center;
        flex-direction: column;
        background-color: #409eff;
        color: #ffffff;
        float: left;
        width: 50%;

        &-title {
            text-align: center;
            color: #ffffff;
            font-weight: 300;
            letter-spacing: 2px;
            font-size: 32px;
        }
    }

    &-right {
        border-left: none;
        color: #ffffff;
        background-color: #ffffff;
        width: 50%;
        height: 100%;
        float: left;

        &-main {
            margin: 0 auto;
            width: 65%;

            &-title {
                color: #333;
                margin-top: 50px;
                margin-bottom: 40px;
                font-weight: 500;
                font-size: 24px;
                text-align: center;
                letter-spacing: 4px;
            }

            &-input {
                height: 40px;
                margin-bottom: 10px;
            }

            &-btn {
                width: 100%;
                height: 45px;
                font-size: 18px !important;
                letter-spacing: 2px;
                font-weight: 300 !important;
                cursor: pointer;
                margin-top: 20px;
                font-family: 'Courier New', Courier, monospace;
                transition: 0.25s;
            }
        }
    }

    .login-footer {
        text-align: center;
        position: absolute;
        bottom: 0;
        padding: 20px;
        color: rgba(255, 255, 255, 0.6);

        p {
            margin: 10px 0;
        }

        a {
            padding: 0 5px;
            color: rgba(255, 255, 255, 0.6);

            &:focus,
            &:hover {
                color: #ffffff;
            }
        }
    }

    &-left,
    &-rigth {
        position: relative;
        min-height: 450px;
        align-items: center;
        display: flex;
    }
}
</style>